<template>
    <div class="login">
        <div class="header">
            <i @click="gohome"></i>
            <div class="goreg" @click="goreg">注册</div>
        </div>
        <div class="login_box">
            <div class="login_titile">邮箱密码登录</div>
            <div class="login_from">
                <div class="text">
                    <span>+86</span>
                    <input type="text" v-model="useraccount" placeholder="请输入邮箱号" />
                </div>
                <div class="email-code">
                    <input type="text" v-model="emailcode" placeholder="请输入邮箱验证码" />
                    <p @click="getCode">获取验证码</p>
                </div>
                <div class="password">
                    <input type="password" v-model="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="login_btn active" @click="goLogin">登录</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserInfo } from "../../store/user";
import { login, sendCode } from "../../api";
import { showToast } from "vant";

const store = useUserInfo();

// 创建路由实例
let router = useRouter();

const useraccount = ref("");
const password = ref("");
const emailcode = ref("");

//去注册
const goreg = () => router.push({ name: "register" });
const gohome = () => router.push({ path: "/" });

//登录
const goLogin = () => {
    let user_acc = useraccount.value;
    let user_pwd = password.value;
    let email_code = emailcode.value;

    if (user_acc.length == 0 || user_pwd.length == 0) {
        // console.log("输入框不能为空");
        showToast("输入框不能为空。");
        return;
    }
    login({ user_acc, user_pwd, email_code })
        .then((content: any) => {
            console.log(content);

            let { token, code, msg, user_id, user_avator, user_nick_name } = content;
            if (code == 200) {
                store.getToken(token);
                let user_info: any = {
                    user_id,
                    user_avator,
                    user_nick_name,
                };
                // 缓存token用户临时身份
                localStorage.setItem("auto_token", token);
                localStorage.setItem("user_info", JSON.stringify(user_info));

                // 赋值给vuex
                store.getToken(localStorage.getItem("auto_token"));
                store.getInfo(JSON.parse(localStorage.getItem("user_info")));

                // 跳转个人中心
                router.push({
                    path: "/main/my",
                });
            }
            // 提示
            showToast(msg);
        })
        .catch((error) => {
            console.log(error);
        });
};

//发送验证码
const getCode = () => {
    let email = useraccount.value;
    if (email.length == 0) {
        // console.log("输入框不能为空");
        showToast("请输入邮箱");
        return;
    }
    let data = {
        email: "1502719402@qq.com",
    };
    // console.log(data);

    sendCode(data);
    showToast("发送验证码");
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    padding: 0 15px;

    .header {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid #000;

        i {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/chacha.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .goreg {
            font-size: 15px;
            color: #353535;
        }
    }

    .login_box {
        padding-top: 20px;
    }
    .login_titile {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .login_from {
        .text {
            width: 100%;
            padding: 15px 0 10px;
            border-bottom: 1px solid #f0f0f0;

            span {
                padding-right: 10px;
                border-right: 1px solid #f0f0f0;
            }

            input {
                outline: 0;
                border: 0;
                padding-left: 10px;
            }
        }
        .email-code,
        .password {
            padding: 20px 0 15px;
            border-bottom: 1px solid #f0f0f0;

            input {
                outline: 0;
                border: 0;
            }
        }
        .email-code {
            position: relative;
            padding-right: 100px;

            p {
                font-size: 14px;
                color: #999;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }

    .login_btn {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        border: 1px solid #f0f0f0;
        background: #ececec;
        font-size: 16px;
        color: #fff;
        padding: 10px;
        border-radius: 20px;

        &.active {
            background: #353535;
        }
    }
}
</style>
